<template>
  <!--  详细童通话记录-->
  <Table style="margin-bottom: 10px" border :header-style="{backgroundColor:'#fffbed'}" max-height="400px"
         :table-data="tableData"
         @handleSizeChange="handleSizeChange"
         @handleCurrentChange="handleCurrentChange"
         :table-column="tableColumn" :page="page">
    <template slot="phone" slot-scope="{row}">
      <el-popover
          placement="right"
          width="120px"
          trigger="click">
        <SelectCallPhone :phone="row.otherPartyPhone" :modeType="modeType" modeKey="operator"
                         :orderId="routesQuery.orderId"/>
        <el-link slot="reference" :underline="false" type="primary">{{
            row.otherPartyPhone
          }}
        </el-link>
      </el-popover>
    </template>
  </Table>
</template>

<script>
import {callInfo} from "@/api/order";

export default {
  props: ['routesQuery'],
  name: "detailedRecord",
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('通话手机号码'), align: 'center', prop: 'otherPartyPhone', slot: 'phone', minWidth: 150},
        {label: this.$t('开始通话时间'), align: 'center', prop: 'callTime', minWidth: 150},
        {label: this.$t('联系人'), align: 'center', prop: 'name', minWidth: 150},
        {label: this.$t('通话时长'), align: 'center', prop: 'callDuration', minWidth: 150},
        {label: this.$t('是否黑名单'), align: 'center', prop: 'blacklist', minWidth: 100, isHtml: true},
        {label: this.$t('是否灰名单'), align: 'center', prop: 'isGreyList', minWidth: 100, isHtml: true},
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getCallLog()
  },
  computed: {
    modeType() {
      return this.routesQuery.modeType || null
    }
  },
  methods: {
    // 详细通话记录
    async getCallLog() {
      const {userId} = this.routesQuery
      const res = await callInfo({
        userId: parseInt(userId),
        ...this.page
      })
      if (res.code === 1 && res.data) {
        const {list, total,} = res.data
        this.tableData = list.map(item => {
          item.callDuration = item.callDuration ? item.callDuration + 's' : ''
          item.blacklist = item.blacklist === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          item.isGreyList = item.isGreyList === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          return item
        })
        this.page = {
          total: total,
        }
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getCallLog()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getCallLog()
    },
  }
}
</script>

<style scoped>

</style>
